<template>
  <div>
    <div id="resRadar" ref="resRadar" style="height:400px;margin-bottom:16px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'ResRadar',
  data () {
    return {
      mychart: {}
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', () => {
      setTimeout(() => {
        this.mychart.resize()
      }, 500)
    })
  },
  methods: {
    initChart () {
      this.mychart = echarts.init(this.$refs.resRadar)
      const option = {
        backgroundColor: 'rgb(12,16,61)',
        color: '#4A99FF',
        title: {
          text: '针对投诉的响应及时率',
          left: '16',
          top: '16',
          textStyle: {
            color: '#fff',
            fontSize: '14',
            fontWeight: 'normal'
          }
        },
        tooltip: {},
        radar: {
          // shape: 'circle',
          center: ['50%', '55%'],
          radius: '60%',
          name: {
            textStyle: {
              color: '#fff'
            }
          },
          splitArea: {
            areaStyle: {
              opacity: 0
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgb(12,38,103)'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgb(12,38,103)'
            }
          },
          indicator: [
            { name: '美的', max: 100 },
            { name: '格力', max: 100 },
            { name: '海尔', max: 100 },
            { name: '史密斯', max: 100 },
            { name: '赛格', max: 100 },
            { name: '小米', max: 100 }
          ]
        },
        series: [
          {
            name: '针对投诉的响应及时率',
            type: 'radar',
            data: [
              {
                value: [78, 41, 57, 88, 69, 63],
                name: '针对投诉的响应及时率',
                itemStyle: {
                  normal: {
                    lineStyle: {
                      color: '#4BFFFC'
                    },
                    shadowColor: '#4BFFFC',
                    shadowBlur: 10
                  }
                },
                areaStyle: {
                  normal: {
                    // 单项区域填充样式
                    color: {
                      type: 'linear',
                      x: 0, // 右
                      y: 0, // 下
                      x2: 1, // 左
                      y2: 1, // 上
                      colorStops: [
                        {
                          offset: 0,
                          color: '#4BFFFC'
                        },
                        {
                          offset: 0.5,
                          color: 'rgba(0,0,0,0)'
                        },
                        {
                          offset: 1,
                          color: '#4BFFFC'
                        }
                      ],
                      globalCoord: false
                    },
                    opacity: 1 // 区域透明度
                  }
                }
              }
            ]
          }
        ]
      }

      this.mychart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
